<script setup>
import { onMounted } from "vue";
import { initMindElixir } from "./hook/useElixir";

let elixirInstance;
const elixirOptions = {
  el: "#map",
  direction: 2, // 0: 左, 1: 右, 2: 下, 3: 上
  draggable: true,
  contextMenu: true,
  toolBar: true,
  nodeMenu: true,
  keypress: true,
  locale: "zh_CN",
  overflowHidden: false,
  mainLinkStyle: 2,
  mouseSelectionButton: 0,
};

onMounted(() => {
  elixirInstance = initMindElixir(elixirOptions);
});
</script>

<template>
  <div class="container">
    <h1>思维链demo</h1>
    <div id="map"></div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  h1 {
    margin: 20px;
    text-align: center;
  }

  #map {
    flex: 1;
    min-height: 600px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 0px auto;
  }
}
</style>
